import React, { useState, useEffect, useRef } from 'react';
import * as XLSX from 'xlsx';
import './StudentPage.css';
import { Student, StageLevel, StudentStatus, AcademyType, marketingDepartments } from '../../shared/models';
import { useData } from '../../shared/DataContext';
import StudentTable from './components/StudentTable';
import AddEditStudentModal from './components/AddEditStudentModal';
import ConfirmModal from './components/ConfirmModal';
import StudentDetailModal from './components/StudentDetailModal';
import ImportModal from './components/ImportModal';
import Pagination from './components/Pagination';

const StudentPage: React.FC = () => {
  // 使用数据上下文替代本地状态
  const { 
    students, 
    classes, 
    grades, 
    statusOptions, 
    stageOptions, 
    academyOptions,
    dormitories,
    createStudent, 
    updateStudent, 
    deleteStudent,
    addAuditLog,
    refreshData
  } = useData();
  
  // 根据学生状态获取对应的样式类名和文本
  const getStatusInfo = (status: string) => {
    switch (status) {
      case 'active':
        return { className: 'status-active', text: '在读' };
      case 'suspended':
        return { className: 'status-suspended', text: '休学' };
      case 'graduated':
        return { className: 'status-graduated', text: '毕业' };
      case 'transferred':
        return { className: 'status-transferred', text: '转学' };
      default:
        return { className: 'status-unknown', text: '未知' };
    }
  };

  // 保留UI状态
  const [filteredStudents, setFilteredStudents] = useState<Student[]>([]);
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedClass, setSelectedClass] = useState(''); // 班级筛选
  const [selectedStatus, setSelectedStatus] = useState(''); // 状态筛选
  // 市场部直接使用models.ts中的定义
  
  const [selectedStudentId, setSelectedStudentId] = useState(''); // 学号筛选
  const [selectedMarketingDept, setSelectedMarketingDept] = useState(''); // 市场部筛选
  const [selectedDormitory, setSelectedDormitory] = useState(''); // 宿舍筛选
  const [showAddEditModal, setShowAddEditModal] = useState(false);
  const [showConfirmModal, setShowConfirmModal] = useState(false);
  
  // 评语接口定义
  interface Comment {
    stage: string;
    teacher: string;
    score: string;
    comment: string;
  }
  
  // 学生详情模态框状态
  const [showDetailModal, setShowDetailModal] = useState(false);
  const [selectedStudent, setSelectedStudent] = useState<Student | null>(null);
  
  // 学生评语数据状态 - 使用Map存储每个学生的评语
  const [studentsComments, setStudentsComments] = useState<Map<string, Comment[]>>(new Map());
  const [isEditing, setIsEditing] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(10);
  // 新增全选和批量删除相关状态
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
  const itemsPerPageOptions = [5, 10, 20, 50]; // 每页显示条数选项
  
  // 导入相关状态
  const [showImportModal, setShowImportModal] = useState(false);
  
  // 导入数据映射配置
  const importMapping = {
    '学号': 'studentId',
    '姓名': 'name',
    '性别': 'gender',
    '阶段': 'stage',
    '学院': 'academy',
    '班级': 'classId',
    '出生日期': 'dateOfBirth',
    '入学日期': 'admissionDate',
    '联系电话': 'phoneNumber',
    '电子邮箱': 'email',
    '家庭住址': 'address',
    '状态': 'status'
  };

  // 处理每页显示条数变化
  const handleItemsPerPageChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setItemsPerPage(parseInt(e.target.value, 10));
    setCurrentPage(1); // 重置到第一页
  };

  // 跳转到指定页码
  const handlePageJump = (pageNum: number) => {
    if (pageNum >= 1 && pageNum <= totalPages) {
      setCurrentPage(pageNum);
    }
  };

  // 快速跳转到首页或末页
  const goToFirstPage = () => setCurrentPage(1);
  const goToLastPage = () => setCurrentPage(totalPages);

  // 为学生随机分配市场部的函数
  const assignRandomMarketingDepartment = async () => {
    // 检查是否有需要分配市场部的学生
    const studentsWithoutMarketing = students.filter(student => 
      !student.academy || 
      (student.academy && !marketingDepartments.includes(student.academy))
    );
    
    if (studentsWithoutMarketing.length > 0) {
      console.log(`需要为 ${studentsWithoutMarketing.length} 名学生分配市场部`);
      
      // 随机分配市场部
      for (const student of studentsWithoutMarketing) {
        try {
          // 随机选择一个市场部
          const randomMarketingDept = marketingDepartments[Math.floor(Math.random() * marketingDepartments.length)];
          
          // 更新学生信息，将学院设置为随机的市场部
          await updateStudent(student.id, { academy: randomMarketingDept as AcademyType });
          
          // 添加审计日志
          await addAuditLog({
            action: 'update',
            entityType: 'student',
            entityId: student.id,
            entityName: student.name,
            details: `为学生分配市场部: ${student.name} (${student.studentId}) -> ${randomMarketingDept}`
          });
        } catch (error) {
          console.error(`更新学生 ${student.id} 的市场部失败:`, error);
        }
      }
      
      // 刷新数据以显示更新后的市场部信息
      await refreshData();
    }
  };
  
  // 页面加载时自动分配市场部
  useEffect(() => {
    // 只有当页面初次加载且有学生数据时才执行分配
    if (students.length > 0) {
      assignRandomMarketingDepartment();
    }
  }, []); // 空依赖数组表示只在组件挂载时执行一次
  
  // 过滤学生数据
  useEffect(() => {
    // 日志：检查原始数据
    console.log('Students in context:', students.length);
    console.log('Search conditions:', { searchTerm, selectedStudentId, selectedMarketingDept, selectedDormitory, selectedClass, selectedStatus });
    
    // 如果没有学生数据，使用硬编码的默认数据进行测试
    let result = students.length > 0 ? [...students] : [
      {
        id: 'test-1',
        studentId: 'S20230001',
        name: '张三',
        gender: 'male',
        dateOfBirth: '2005-01-15',
        admissionDate: '2023-09-01',
        classId: '1',
        stage: 'freshman',
        academy: marketingDepartments[Math.floor(Math.random() * marketingDepartments.length)],
        phoneNumber: '13800138001',
        dormitoryId: 'dorm-1',
        status: 'active'
      },
      {
        id: 'test-2',
        studentId: 'S20230002',
        name: '李四',
        gender: 'female',
        dateOfBirth: '2005-03-22',
        admissionDate: '2023-09-01',
        classId: '1',
        stage: 'freshman',
        academy: marketingDepartments[Math.floor(Math.random() * marketingDepartments.length)],
        phoneNumber: '13800138002',
        dormitoryId: 'dorm-2',
        status: 'active'
      },
      {
        id: 'test-3',
        studentId: 'S20230003',
        name: '王五',
        gender: 'male',
        dateOfBirth: '2005-05-10',
        admissionDate: '2023-09-01',
        classId: '2',
        stage: 'sophomore',
        academy: marketingDepartments[Math.floor(Math.random() * marketingDepartments.length)],
        phoneNumber: '13800138003',
        dormitoryId: 'dorm-1',
        status: 'active'
      }
    ];
    
    console.log('Using students data:', result.length);
    
    // 按班级、状态、学号、市场部、宿舍搜索
    if (searchTerm) {
      const term = searchTerm.toLowerCase();
      result = result.filter(
        student => {
          // 直接判断是否为市场部
          const isMarketingDepartment = student.academy && student.academy === '市场部';
          
          // 基本搜索条件
          const matchesBasic = 
            (student.name && student.name.toLowerCase().includes(term)) ||
            (student.studentId && student.studentId.toLowerCase().includes(term)) ||
            (student.classId && String(student.classId).toLowerCase().includes(term)) ||
            (student.phoneNumber && student.phoneNumber.toLowerCase().includes(term)) ||
            // 添加市场部搜索
            (isMarketingDepartment && '市场部'.toLowerCase().includes(term)) ||
            // 添加状态搜索
            (student.status && getStatusInfo(student.status).text.toLowerCase().includes(term));
          
          // 按宿舍名称搜索
          if (!matchesBasic && student.dormitoryId) {
            const dormitoryInfo = dormitories.find(d => d.id === student.dormitoryId);
            if (dormitoryInfo) {
              const dormitoryName = `${dormitoryInfo.building}-${dormitoryInfo.roomNumber}`;
              return dormitoryName.toLowerCase().includes(term);
            }
          }
          
          return matchesBasic;
        }
      );
    }

    // 按班级过滤
    if (selectedClass) {
      result = result.filter(student => String(student.classId) === String(selectedClass));
    }

    // 按状态过滤
    if (selectedStatus) {
      result = result.filter(student => student.status === selectedStatus);
    }

    // 按学号过滤
    if (selectedStudentId) {
      result = result.filter(student => 
        student.studentId && student.studentId.includes(selectedStudentId)
      );
    }

    // 按市场部过滤
    if (selectedMarketingDept) {
      // 筛选指定的市场部学生
      result = result.filter(student => student.academy && student.academy === selectedMarketingDept);
    }

    // 按宿舍过滤
    if (selectedDormitory) {
      result = result.filter(student => student.dormitoryId === selectedDormitory);
    }

    // 日志：检查过滤结果
    console.log('Filtered students count:', result.length);
    
    setFilteredStudents(result);
    setCurrentPage(1); // 重置到第一页
  }, [students, searchTerm, selectedClass, selectedStatus, selectedStudentId, selectedMarketingDept, selectedDormitory]);

  // 分页逻辑
  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentStudents = filteredStudents.slice(indexOfFirstItem, indexOfLastItem);
  const totalPages = Math.ceil(filteredStudents.length / itemsPerPage);

  // 处理查看学生详情
  const handleViewDetail = (student: Student) => {
    setSelectedStudent(student);
    setShowDetailModal(true);
    // 添加审计日志
    addAuditLog({
      action: 'view',
      entityType: 'student',
      entityId: student.id,
      entityName: student.name,
      details: `查看学生详情: ${student.name} (${student.studentId})`
    });
  };

  // 关闭详情模态框
  const handleCloseDetailModal = () => {
    setShowDetailModal(false);
    // 不立即清空selectedStudent，以便下次打开时能正确显示评语
  };
  
  // 处理评语更新
  const handleCommentsChange = (comments: Comment[]) => {
    if (selectedStudent) {
      const newCommentsMap = new Map(studentsComments);
      newCommentsMap.set(selectedStudent.id, comments);
      setStudentsComments(newCommentsMap);
    }
  };
  
  // 获取特定学生的评语
  const getStudentComments = (studentId: string): Comment[] => {
    return studentsComments.get(studentId) || [];
  };

  // 处理添加学生
  const handleAddStudent = () => {
    setSelectedStudent(null);
    setIsEditing(false);
    setShowAddEditModal(true);
  };

  // 处理编辑学生
  const handleEditStudent = (student: Student) => {
    setSelectedStudent(student);
    setIsEditing(true);
    setShowAddEditModal(true);
  };
  
  // 处理单个学生选择变更
  const handleSelectChange = (id: string, isSelected: boolean) => {
    setSelectedIds(prev => {
      const newSelected = new Set(prev);
      if (isSelected) {
        newSelected.add(id);
      } else {
        newSelected.delete(id);
      }
      return newSelected;
    });
  };
  
  // 处理全选/取消全选
  const handleSelectAll = (isSelected: boolean) => {
    if (isSelected) {
      // 获取当前页显示的所有学生ID
      const currentPageStudentIds = currentStudents.map(student => student.id);
      setSelectedIds(new Set(currentPageStudentIds));
    } else {
      setSelectedIds(new Set());
    }
  };
  
  // 处理批量删除
  const handleBatchDelete = async () => {
    if (selectedIds.size === 0) {
      alert('请先选择要删除的学生');
      return;
    }
    
    if (window.confirm(`确定要删除选中的 ${selectedIds.size} 名学生吗？此操作不可撤销。`)) {
      let deleteCount = 0;
      
      // 遍历选中的ID并删除
      for (const id of selectedIds) {
        try {
          const student = students.find(s => s.id === id);
          if (student) {
            await deleteStudent(id);
            deleteCount++;
            // 添加审计日志
            await addAuditLog({
              action: 'delete',
              entityType: 'student',
              entityId: id,
              entityName: student.name,
              details: `批量删除学生: ${student.name} (${student.studentId})`
            });
          }
        } catch (error) {
          console.error(`删除学生ID ${id} 失败:`, error);
        }
      }
      
      // 清空选择
      setSelectedIds(new Set());
      
      if (deleteCount > 0) {
        alert(`成功删除 ${deleteCount} 名学生`);
      } else {
        alert('删除失败，请重试');
      }
    }
  };

  // 处理删除学生
  const handleDeleteStudent = (student: Student) => {
    setSelectedStudent(student);
    setShowConfirmModal(true);
  };

  // 确认删除学生
  const confirmDeleteStudent = async () => {
    if (selectedStudent) {
      try {
        // 使用数据服务删除学生
        await deleteStudent(selectedStudent.id); // 确保传入string类型ID
        
        // 添加审计日志
        await addAuditLog({
          action: 'delete',
          entityType: 'student',
          entityId: selectedStudent.id,
          entityName: selectedStudent.name,
          details: `删除学生: ${selectedStudent.name} (${selectedStudent.studentId})`
        });
        alert(`成功删除学生: ${selectedStudent.name}`);
      } catch (error) {
        console.error('删除学生失败:', error);
        alert('删除学生失败，请重试');
      } finally {
        setShowConfirmModal(false);
        setSelectedStudent(null);
      }
    }
  };

  // 保存学生（新增或编辑）
  const handleSaveStudent = async (studentData: Omit<Student, 'id'>) => {
    try {
      if (isEditing && selectedStudent) {
        // 编辑现有学生
        // 确保日期格式正确
        const formattedData = {
          ...studentData,
          dateOfBirth: studentData.dateOfBirth ? new Date(studentData.dateOfBirth).toISOString() : new Date().toISOString(),
          admissionDate: studentData.admissionDate ? new Date(studentData.admissionDate).toISOString() : new Date().toISOString()
        };
        
        // 调用更新学生方法
        await updateStudent(selectedStudent.id, formattedData);
        
        // 添加审计日志
        await addAuditLog({
          action: 'update',
          entityType: 'student',
          entityId: selectedStudent.id,
          entityName: studentData.name,
          details: `更新学生信息: ${studentData.name} (${studentData.studentId})`
        });
        
        alert(`成功更新学生: ${studentData.name}`);
      } else {
        // 添加新学生
        const newStudent = {
          ...studentData,
          // 确保所有字段都使用正确的名称和类型
          classId: studentData.classId.toString() // 确保classId是string类型
        };
        
        // 调用创建学生方法，ID会在dataService中生成
        await createStudent(newStudent);
        
        // 添加审计日志
        await addAuditLog({
          action: 'create',
          entityType: 'student',
          entityName: newStudent.name,
          details: `新增学生: ${newStudent.name} (${newStudent.studentId})`
        });
        
        alert(`成功添加学生: ${newStudent.name}`);
      }
      setShowAddEditModal(false);
    } catch (error) {
      console.error('保存学生失败:', error);
      alert('保存学生信息失败，请重试');
    }
  };
  
  // 处理导入数据
  const handleImportData = () => {
    setShowImportModal(true);
  };
  
  // 关闭导入模态框
  const handleCloseImportModal = () => {
    setShowImportModal(false);
  };

  // 导出学生数据
  const handleExportStudents = () => {
    if (filteredStudents.length === 0) {
      alert('没有可导出的数据');
      return;
    }

    // 转换学生数据为Excel格式所需的数据
    const excelData = filteredStudents.map(student => {
      const gradeText = student.grade === 'freshman' ? '高一' : 
                       student.grade === 'sophomore' ? '高二' : 
                       student.grade === 'junior' ? '高三' : student.grade;
      
      const statusText = student.status === 'active' ? '在读' :
                        student.status === 'graduated' ? '毕业' :
                        student.status === 'transferred' ? '转学' :
                        student.status === 'suspended' ? '休学' : '未知';

      // 获取班级名称
      const classInfo = classes.find(c => c.id === student.classId);

      return {
        '学号': student.studentId,
        '姓名': student.name,
        '性别': student.gender === 'male' ? '男' : '女',
        '年级': gradeText,
        '班级': classInfo?.name || student.classId,
        '出生日期': student.dateOfBirth ? new Date(student.dateOfBirth).toLocaleDateString('zh-CN') : '',
        '入学日期': student.admissionDate ? new Date(student.admissionDate).toLocaleDateString('zh-CN') : '',
        '联系电话': student.phoneNumber || '',
        '电子邮箱': student.email || '',
        '家庭住址': student.address || '',
        '状态': statusText
      };
    });

    // 创建工作簿和工作表
    const ws = XLSX.utils.json_to_sheet(excelData);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, '学生数据');

    // 设置文件名，包含当前日期时间以避免覆盖
    const now = new Date();
    const timestamp = now.getFullYear() + 
                     String(now.getMonth() + 1).padStart(2, '0') + 
                     String(now.getDate()).padStart(2, '0') + 
                     '_' + 
                     String(now.getHours()).padStart(2, '0') + 
                     String(now.getMinutes()).padStart(2, '0');
    
    // 导出Excel文件
    XLSX.writeFile(wb, `学生数据_${timestamp}.xlsx`);
    
    // 添加审计日志
    addAuditLog({
      action: 'export',
      entityType: 'student',
      entityId: 0,
      entityName: '批量导出',
      details: `导出${filteredStudents.length}名学生数据到Excel文件`
    });
    
    alert(`成功导出 ${filteredStudents.length} 名学生数据到Excel文件`);
  };

  return (
    <div className="student-page">
      <div className="page-header">
        <h1>学生管理</h1>
        <div className="header-actions">
        <button className="btn-export" onClick={handleExportStudents}>
          导出数据
        </button>
        <button className="btn-import" onClick={handleImportData}>
          导入数据
        </button>
        <button className="btn-primary" onClick={handleAddStudent}>
          添加学生
        </button>
        <button 
          className={`btn-danger ${selectedIds.size === 0 ? 'disabled' : ''}`}
          onClick={handleBatchDelete}
          disabled={selectedIds.size === 0}
        >
          批量删除 ({selectedIds.size})
        </button>
      </div>
      </div>

      <div className="filter-section">
        <div className="search-box">
          <input
            type="text"
            placeholder="搜索班级、状态、学号、市场部、宿舍..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="search-input"
          />
        </div>
        <div className="filter-controls">
          {/* 班级下拉菜单 */}
          <div className="enhanced-select-container">
            <select
              value={selectedClass}
              onChange={(e) => setSelectedClass(e.target.value)}
              className="filter-select enhanced-select"
            >
              <option value="">所有班级</option>
              {classes.map(classItem => {
                // 计算每个班级的学生数量
                const count = students.filter(s => s.classId === classItem.id).length;
                return (
                  <option key={classItem.id} value={classItem.id}>
                    {classItem.name} ({count})
                  </option>
                );
              })}
            </select>
            {selectedClass && (
              <button 
                className="clear-filter-btn"
                onClick={() => setSelectedClass('')}
                title="清除选择"
              >
                ×
              </button>
            )}
          </div>
          
          {/* 状态下拉菜单 */}
          <div className="enhanced-select-container">
            <select
              value={selectedStatus}
              onChange={(e) => setSelectedStatus(e.target.value)}
              className="filter-select enhanced-select"
              aria-label="学生状态筛选"
            >
              <option value="">所有状态</option>
              {statusOptions.map(option => {
                // 计算每个状态的学生数量
                const count = students.filter(s => s.status === option.value).length;
                return (
                  <option key={option.value} value={option.value}>
                    {option.label} ({count})
                  </option>
                );
              })}
            </select>
            {selectedStatus && (
              <button 
                className="clear-filter-btn"
                onClick={() => setSelectedStatus('')}
                title="清除状态筛选"
                aria-label="清除状态筛选"
              >
                ×
              </button>
            )}
          </div>
          
          {/* 学号输入框 */}
          <div className="enhanced-select-container">
            <input
              type="text"
              placeholder="输入学号"
              value={selectedStudentId || ''}
              onChange={(e) => setSelectedStudentId(e.target.value)}
              className="filter-select enhanced-select"
            />
            {selectedStudentId && (
              <button 
                className="clear-filter-btn"
                onClick={() => setSelectedStudentId('')}
                title="清除学号筛选"
              >
                ×
              </button>
            )}
          </div>
          
          {/* 市场部下拉菜单 */}
          <div className="enhanced-select-container">
            <select
              value={selectedMarketingDept}
              onChange={(e) => setSelectedMarketingDept(e.target.value)}
              className="filter-select enhanced-select"
            >
              <option value="">所有市场部</option>
              {/* 显示所有市场部选项 */}
              {marketingDepartments.map(dept => (
                <option key={dept} value={dept}>
                  {dept} ({students.filter(s => s.academy && s.academy === dept).length})
                </option>
              ))}
            </select>
            {selectedMarketingDept && (
              <button 
                className="clear-filter-btn"
                onClick={() => setSelectedMarketingDept('')}
                title="清除市场部筛选"
              >
                ×
              </button>
            )}
          </div>
          
          {/* 宿舍下拉菜单 */}
          <div className="enhanced-select-container">
            <select
              value={selectedDormitory}
              onChange={(e) => setSelectedDormitory(e.target.value)}
              className="filter-select enhanced-select"
            >
              <option value="">所有宿舍</option>
              {dormitories.map(dorm => {
                // 计算每个宿舍的学生数量
                const count = students.filter(s => s.dormitoryId === dorm.id).length;
                const dormName = `${dorm.building}-${dorm.roomNumber}`;
                return (
                  <option key={dorm.id} value={dorm.id}>
                    {dormName} ({count})
                  </option>
                );
              })}
            </select>
            {selectedDormitory && (
              <button 
                className="clear-filter-btn"
                onClick={() => setSelectedDormitory('')}
                title="清除宿舍筛选"
              >
                ×
              </button>
            )}
          </div>
          

          
          {/* 筛选结果统计 */}
          <div className="filter-summary">
            共 {filteredStudents.length} 名学生
          </div>
        </div>
      </div>

      <StudentTable
          students={currentStudents}
          onEdit={handleEditStudent}
          onDelete={handleDeleteStudent}
          onViewDetail={handleViewDetail}
          selectedIds={selectedIds}
          onSelectChange={handleSelectChange}
          onSelectAll={handleSelectAll}
          dormitories={dormitories}
          classes={classes}
        />

      <Pagination
        currentPage={currentPage}
        totalPages={totalPages}
        totalItems={filteredStudents.length}
        itemsPerPage={itemsPerPage}
        onPageChange={setCurrentPage}
        onItemsPerPageChange={handleItemsPerPageChange}
        itemsPerPageOptions={itemsPerPageOptions}
      />

      {/* 添加/编辑学生弹窗 */}
      {showAddEditModal && (
        <AddEditStudentModal
          isOpen={showAddEditModal}
          isEditing={isEditing}
          student={selectedStudent}
          classes={classes}
          onClose={() => setShowAddEditModal(false)}
          onSave={handleSaveStudent}
        />
      )}

      {/* 确认删除弹窗 */}
      {showConfirmModal && (
        <ConfirmModal
          isOpen={showConfirmModal}
          title="确认删除"
          message={`确定要删除学生"${selectedStudent?.name}"吗？此操作不可撤销。`}
          onCancel={() => setShowConfirmModal(false)}
          onConfirm={confirmDeleteStudent}
        />
      )}

      {showDetailModal && (
        <StudentDetailModal
          student={selectedStudent}
          isOpen={showDetailModal}
          onClose={handleCloseDetailModal}
          comments={selectedStudent ? getStudentComments(selectedStudent.id) : undefined}
          onCommentsChange={handleCommentsChange}
        />
      )}
      
      {/* 导入数据模态框 */}
      <ImportModal
          isOpen={showImportModal}
          classes={classes}
          onClose={() => setShowImportModal(false)}
          onImportComplete={() => {
            console.log('导入完成');
            // 重置筛选条件和分页，以显示最新导入的数据
            setCurrentPage(1);
            setSearchTerm('');
            setSelectedStage('');
            setSelectedAcademy('');
            setSelectedStatus('');
            setSelectedClass('');
            alert('数据导入成功！列表已更新。');
          }}
        />
    </div>
  );
};

export default StudentPage;